import React, { Component } from 'react';
import { List , Scroller} from '$yo-component';
import Header from '$component/header/index.js';
import yoHistory from '$common/history';
import './index.scss';
// import Scroller from 'yo3/component/scroller';

var Skill = React.createClass({
    getInitialState:function(){
        return {
            dataSkill:[],
            renderPage:""
        }
    },
    componentWillMount:function(){
        var self = this;
        fetch('../mock/skill.json')
        .then(function(response) {
            console.log(response.status)
            if (response.status >= 400) {
                throw new Error("Bad response from server");
            }
            return response.json();
        })
        .then(function(stories) {
            self.setState({
                dataSkill:stories
            })
            
        });
    },
    render:function() {
        var renderPage = this.state.dataSkill.map(function(ele,index){
            return (<div className="skillCom flex">
            <div className="yo-card">
                
                <div className="bd cols">
                    <div className="flex">
                        <h3 className="hd">{ele.name}</h3>
                        <p className="desc">{ele.describe}</p>
                    </div>
                    <img className="img-cover" src={ele.src} alt="类型图片"/>
                </div>
                <div className="ft" style={{minHeight:.28+'rem'}}>
                    <span style={{"color":"grey",fontSize:12}}>time:{ele.time}</span>
                    <span style={{"color":"grey",fontSize:12}}>type:{ele.type}</span>
                </div>
            </div>
        </div>)
        })

        return (
            <div className="yo-flex">
                <Scroller>
                   {renderPage}

                </Scroller>
            </div>
        )
    }
})


export default Skill;
